<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link th:href="@{../assets/css/page.css}" rel="stylesheet"/>
    <link th:href="@{../assets/css/NGR.css}" rel="stylesheet"/>
    <link th:href="@{../assets/css/platformDemo.css}" rel="stylesheet"/>

    <!--[if lt IE 9]>
    <script th:src="@{../assets/js/html5shiv.js}"></script>
    <script th:src="@{../assets/js/respond.min.js}"></script>
    <![endif]-->
    <!-- <style>
    .inside-header {
            background:url(../assets/img/home/home.png);
            width:100%;
            height: 100%;
            background-repeat : no-repeat;
            background-color: #DAE8F5;
        }


    </style>
     -->
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">

    <div class="widget-body no-padding">


        <div id="map" style="width: 100%; height: 100%; margin: 0; padding: 0; position:absolute;background-color: #DAE8F5">


        </div>


    </div>
</div>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>
<script type="text/javascript">
    var markersLayer;
    var value = -1;
    (function () {
        window.map = new NGR.View('map', {
            //通过开发者平台获取AppKey
            AppKey: "f83a1f3ce8374d7fbda8931f71933fde",
            compassControl: {
                enable: true,
            },
            dimensionControl: {
                enable: true,
            }
        });
        window.res = new NGR.DataSource({
            //通过开发者平台获取AppKey
            AppKey: "f83a1f3ce8374d7fbda8931f71933fde"
        });
        window.layers = {};
        window.marker = {};
        var mapId = 2033;
        // window.geomLayers = {};
        var control = NGR.control.floor();
        markersLayer = NGR.layerGroup();
        var onerror = function (e) {
            console.error(e, e.stack);
        };

// 请求楼层数据
        var loadPlanarGraph = function (planarGraphId) {
            res.requestPlanarGraph(planarGraphId).then(function (layerInfo) {
                //  console.log(layerInfo);
                NGR.IO.fetch({
                    url: '../assets/fonts/style.template.json',
                    onsuccess: JSON.parse
                }).then(function (style) {
                    map.clear();
                    layers.frame = NGR.featureLayer(layerInfo, {
                        layerType: 'Frame',
                        styleConfig: style
                    });
                    map.addLayer(layers.frame); // 将楼层框架图层添加到地图中去
                    // 准备商铺图层
                    layers.area = NGR.featureLayer(layerInfo, {
                        layerType: 'Area',
                        styleConfig: style
                    });
                    map.addLayer(layers.area); // 将商铺图层添加到地图中去

                    // 准备商铺文字和图标图层
                    layers.annotation = NGR.featureLayer(layerInfo.Area, {
                        layerType: 'LogoLabel',
                        styleConfig: style
                    });
                    // 准备公共设施图标图层
                    layers.facility = NGR.featureLayer(layerInfo.Facility, {
                        layerType: 'Facility',
                        styleConfig: style
                    });
                    // 准备碰撞检测图层组
                    layers.collision = NGR.layerGroup.collision({
                        margin: 3
                    });
                    layers.collision.addLayer(layers.annotation); // 将商铺文字和图标图层添加到碰撞检测图层组中去
                    layers.collision.addLayer(layers.facility); // 将公共设施图标图层添加到碰撞检测图层组中去
                    map.addLayer(layers.collision); // 将碰撞检测图层组添加到地图中去
                    map.addLayer(markersLayer);
                    map.render();   // 所有图层都添加到地图后，渲染地图
                }).fail(onerror);
            }).fail(onerror);
        };
        var insertLine = function (parent, innerHTML, className) {
            var line = NGR.DomUtil.create('p', className, parent);
            var item = NGR.DomUtil.create('a', 'item ' + className, line);
            item.innerHTML = innerHTML;

        };
// 初始化显示UI显示文字
//    var info = NGR.DomUtil.create('div', 'platform-demo-info', document.body);
//    insertLine(info, '救 援 疏 散 调 度 图', 'screen');


// 请求地图数据
        res.requestMap(mapId).then(function (mapInfo) {
            res.requestPOIChildren(mapInfo.poi).then(function (floors) {
                // 初始化楼层控件
                map.addControl(control);
                control.on('change', function (e) {
                    markersLayer.clearLayers();
                    $.ajax({
                        url: "../firecontrolfacilities/findItems",
                        type: "post",
                        dataType: "json",
                        data: {
                            "ifloor": e.to
                        },
                        success: function (data) {
                            pub(data);
                        },
                        error: function (error) {

                        }
                    })

                    control.setCurrentFloor(e.to, loadPlanarGraph);
                });
                control.setFloorList(floors);
                $.ajax({
                    url: "../firecontrolfacilities/findItems",
                    type: "post",
                    dataType: "json",
                    data: {
                        "ifloor": floors[4].id
                    },
                    success: function (data) {
                        pub(data);
                    },
                    error: function (error) {

                    }
                })
                control.setCurrentFloor(floors[4].id, loadPlanarGraph);

            }).fail(onerror);
        }).fail(onerror);

    }).call(this);

    function getValue(obj) {
        value = obj.value;

    }

    function pub(data) {
        //<![CDATA[
        for (var i = 0; i < data.length; i++) {
            if (data[i].istatus == 0) {
                var tempmarker = NGR.marker([data[i].clat, data[i].clng], {
                    icon: NGR.icon({
                        iconUrl: '../assets/img/fire.png',
                        iconSize: [25, 25]
                    })
                });
            } else {
                var tempmarker = NGR.marker([data[i].clat, data[i].clng], {
                    icon: NGR.icon({
                        iconUrl: '../assets/img/firered.png',
                        iconSize: [25, 25]
                    })
                });

            }
            marker[tempmarker._ngr_id] = tempmarker;
            marker[tempmarker._ngr_id].obj = data[i];
            marker[tempmarker._ngr_id].on("click", function (e) {
                var id = e.target._ngr_id;
                var popup = NGR.popup({
                    closeButton: true,
                    height: 550
                })
                    .setLatLng(e.latlng)
                    .setContent('<div>设施名称：<input style="width:150px;" id="cname' + id + '" /><br />是否可用：<input name="useable' + id + '" id="use' + id + '"  type="radio" value="0" onclick="getValue(this)" />可用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input  name="useable' + id + '" type="radio" value="1" id="nouse' + id + '" onclick="getValue(this) " />不可用<br />使用说明：<input type="text" id="cremark' + id + '" style="width:150px"/><br /><input id="save' + id + '" type="button" value="保存"/><input type="button" value="取消"/></div>')
                    .openOn(map);
                $("#cname" + id).val(this.obj.cname);
                $("#cremark" + id).val(this.obj.cremark);
                value = this.obj.istatus;
                if (this.obj.istatus == 0) {
                    $("#use" + id).attr("checked", true);
                } else {
                    $("#nouse" + id).attr("checked", true);
                }
                var iid = this.obj.iid;
                document.getElementById("save" + id).onclick = function () {
                    var cname = $("#cname" + id).val();
                    var cremark = $("#cremark" + id).val();
                    var url = "../firecontrolfacilities/editNoLatLng";
                    $.ajax({
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: {
                            "iid": iid,
                            "cname": cname,
                            "cremark": cremark,
                            "istatus": value
                        },
                        success: function (data) {
                            // map.closePopup(popup);
                            alert(data.retmsg);
                            window.location.reload();
                        },
                        error: function (error) {
                        }
                    })
                }
            })
            markersLayer.addLayer(marker[tempmarker._ngr_id]);
        }
        //]]> 
    }
</script>
</body>
</html>

